<template>
  <el-container class="h-100 p-3" id="countylevel-achievements">
    <el-main class="p-0">
      <el-row style="position:absolute;z-index:200;margin-left:50px;margin-top:15px;">
        <el-col :span="12">
          <div class="theme" style="backgroundColor:#0AD30D">已完成</div>
        </el-col>
        <el-col :span="12">
          <div class="theme" style="backgroundColor:#EC580E">未完成</div>
        </el-col>
      </el-row>
      <ConutryCommonMap ref="conutryCommonMap"/>
    </el-main>
    <el-aside width="500px" class="ml-3 text-center d-flex flex-column">
      <el-select class="w-100" v-model="selectArea" placeholder="请选择" @change="cityChange">
        <el-option
          v-for="item in cityOptions"
          :key="item.cityId"
          :label="item.cityName"
          :value="item.cityId"
        ></el-option>
      </el-select>
      <el-table :data="tableData" border height="400" class="mt-2">
        <el-table-column prop="city_name" label="地市" align="center"></el-table-column>
        <el-table-column prop="area_name" label="区县" align="center"></el-table-column>
        <el-table-column label="上报时间" prop="xjdcjgsb_sbsj" align="center"></el-table-column>
      </el-table>
      <div class="mt-2 bg-white pt-3" style="height:300px;">
        <CommonEcharts ref="commonEcharts" titleCharts="实施方案备案统计"/>
      </div>
    </el-aside>
  </el-container>
</template>
<script>
import ConutryCommonMap from "./ConutryCommonMap";
import axios from "axios";
import CommonEcharts from "./CommonEcharts";
export default {
  name: "provincelevelCreateStatistics",
  title: "省级建库统计",
  components: { ConutryCommonMap, CommonEcharts },
  data() {
    return {
      cityOptions: [],
      selectArea: null,
      tableData: null,
      provinceId: "",
      isRender: false,
      pieData: [],
      themeData: ["未上报", "已上报"]
    };
  },
  methods: {
    cityChange() {
      this.getData();
      let selectName = "";
      this.cityOptions.forEach(item => {
        if (item.cityId == this.selectArea) {
          selectName = item.cityName;
        }
      });
    },
    getData() {
      let surl = "";
      if (this.provinceId == this.selectArea) {
        surl = this.$api.reported;
      } else {
        surl = this.$api.reported + "?cityId=" + this.selectArea;
      }
      axios
        .get(surl)
        .then(res => {
          if (res.data.code === "200") {
            this.tableData = res.data.data;
            this.pieData = [];
            let isComplate = 0;
            this.$nextTick(() => {
              var tData = [];
              this.tableData.forEach(item => {
                if (item.xjdcjgsb_sfsb == 1) {
                  isComplate++;
                }
                tData.push({
                  area_name: item.area_name,
                  status: item.xjdcjgsb_sfsb
                });
              });
              if (!this.isRender) {
                this.$refs.conutryCommonMap.loadMap(tData);

                this.isRender = true;
              }
              this.pieData.push({
                name: "未上报",
                value: this.$commonUtils.getTotalArea() - isComplate
              });
              this.pieData.push({
                name: "已上报",
                value: isComplate
              });
              this.$refs.commonEcharts.setData(this.pieData, this.themeData);
            });
          } else {
            this.$codeError(res);
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    }
  },
  mounted() {
    this.$get(this.$api.getCityInfo).then(res => {
      if (res.data.code === "200") {
        var result = res.data.data;
        this.cityOptions = [];
        this.cityOptions.push({
          cityId: result.provinceId,
          cityName: result.provinceName
        });
        this.provinceId = result.provinceId;
        res.data.data.citys.forEach(item => {
          this.cityOptions.push({
            cityId: item.cityId,
            cityName: item.cityName
          });
        });
        this.selectArea = this.cityOptions[0].cityId;
        this.$nextTick(() => {
          this.getData();
        });
      }
    });
  }
};
</script>
<style lang='scss'>
#countylevel-achievements {
  .theme {
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    color: white;
  }
}
</style>